<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼出自己名字</title>
    <style>
        span {
            display: inline-block;
            background: url(img/abc2.png) no-repeat
        }
        .c {
            width: 97px;
            height: 132px;
            background-position: -250px 0;
        }
        .h {
            width: 102px;
            height: 132px;
            background-position: -507px -10px;
        }
        .e {
            width: 90px;
            height: 132px;
            background-position: -138px -157px;
        }
        .n {
            width: 102px;
            height: 132px;
            background-position: -155px -367px;
        }
    </style>
</head>
<body>
    <span class="c"></span>
    <span class="h"></span>
    <span class="e"></span>
    <span class="n"></span>
    <span class="c"></span>
    <span class="h"></span>
    <span class="e"></span>
    <span class="n"></span>
    <div>
        <img src="img/13-案例.png" alt="">

    </div>
    
</body>
</html>